<!-- 空间预约弹框 -->
<template>
    <el-dialog title="新增" :visible.sync="addDialogVisible" width="70%" :before-close="handleClose">
        <div class="chooseSpace">
            <h4>选择预约空间</h4>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane v-for="item in listReservationSpaces" :key="item.id" :label="item.spatialClassification">
                    <div style="display: flex;">
                        <div v-for="items in item.space" :key="items.id">
                            <img class="chooseSpaceImg" :src="items.spaceImgUrl" @click="selectSpacePictures(items)">
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <div>
            </div>
        </div>
        <div class="chooseSpace">
            <h4>填写预约信息</h4>
            <div class="timeDate">
                <el-row type="flex" align="middle">
                    <el-col :span="6">
                        <h4>预约日期</h4>
                    </el-col>
                    <el-col :span="10" v-for="item in selectedDateList" :key="item.id">
                        <el-badge :value="item.WhetherAboutFull == false ? '已约满' : ''" class="item">
                            <el-button @click="selectTime()" :class="selectIs"
                                :disabled="item.WhetherAboutFull == false ? true : false" size="small">{{
                                    item.selectedDate }}</el-button>
                        </el-badge>
                    </el-col>
                </el-row>
                <el-row type="flex" align="middle">
                    <el-col :span="3">
                        <h4>预约开始时间</h4>
                    </el-col>
                    <el-col :span="4">
                        <el-time-picker v-model="selectedTime" is-range range-separator="至" start-placeholder="开始时间"
                            end-placeholder="结束时间" format="HH:mm" :picker-options="{
                                selectableRange: '00:10 - 23:50'
                            }"></el-time-picker>
                    </el-col>
                </el-row>
                <el-row type="flex" align="middle" :gutter="40">
                    <el-col :span="3">
                        <h4>预约主题</h4>
                    </el-col>
                    <el-col :span="3">
                        <el-input v-model="appointmentTheme" placeholder="单行输入"></el-input>
                    </el-col>
                    <el-col :span="3">
                        <h4>是否独自结束</h4>
                    </el-col>
                    <el-col :span="3">
                        <el-switch v-model="isItOverAlone" active-color="#13ce66" inactive-color="#eaecf0">
                        </el-switch>
                    </el-col>
                    <el-col :span="3">
                        <h4>预约人数</h4>
                    </el-col>
                    <el-col :span="3">
                        <el-input-number v-model="NumberAppointments" @change="NumberAppointment" :min="1" :max="10"
                            label="描述文字"></el-input-number>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="chooseSpace">
            <el-row>
                <el-col>
                    <h4>预约伙伴信息</h4>
                </el-col>
            </el-row>
            <el-button type="primary">添加人员</el-button>
            <el-table :data="studentTable" style="width: 100%">
                <el-table-column type="index" label="序号">
                </el-table-column>
                <el-table-column prop="faculty" label="所属院系">
                </el-table-column>
                <el-table-column prop="name" label="学生姓名">
                </el-table-column>
                <el-table-column prop="sex" label="性别">
                </el-table-column>
                <el-table-column prop="idNumber" label="身份证号">
                </el-table-column>
                <el-table-column prop="studentId" label="学号">
                </el-table-column>
                <el-table-column prop="specialty" label="专业">
                </el-table-column>
                <el-table-column prop="grade" label="年级">
                </el-table-column>
                <el-table-column prop="contactNumber" label="联系电话">
                </el-table-column>
                <el-table-column label="是否为预约人">
                    <template slot-scope="scope">
                        {{ scope.row.isReserve == true ? '是' : '否' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.isReserve" type="text" size="small">设为预约人</el-button>
                        <el-button type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>

export default {
    data() {
        return {
            // 预约人数
            NumberAppointments: '',
            // 是否独自结束
            isItOverAlone: false,
            // 预约主题
            appointmentTheme: '',
            // 预约时间
            selectedTime: '',
            // 预约日期
            selectedDateList: [
                {
                    // 预约日期
                    selectedDate: '今天(04-28)',
                    id: 1,
                    // 是否约满
                    WhetherAboutFull: false
                },
                { selectedDate: '明天(04-28)', id: 2, WhetherAboutFull: true },
                { selectedDate: '后天(04-28)', id: 3, WhetherAboutFull: false },
                { selectedDate: '后天(04-28)', id: 4, WhetherAboutFull: true },
            ],
            addDialogVisible: false,
            activeName: '',
            listReservationSpaces: [
                {
                    id: 1,
                    spatialClassification: "图书馆",
                    space: [
                        {
                            id: 1,
                            spaceImgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                        },
                        {
                            id: 2,
                            spaceImgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                        },
                        {
                            id: 3,
                            spaceImgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                        },
                    ]
                },
                {
                    id: 2,
                    spatialClassification: "实验室",
                    space: [
                        {
                            id: 1,
                            spaceImgUrl: 'https://imgs.699pic.com/images/500/474/567.jpg!detail.v1'
                        },
                        {
                            id: 2,
                            spaceImgUrl: 'https://imgs.699pic.com/images/500/474/567.jpg!detail.v1'
                        },
                        {
                            id: 3,
                            spaceImgUrl: 'https://imgs.699pic.com/images/500/474/567.jpg!detail.v1'
                        },
                    ]
                },
            ],
            selectIs: '',
            studentTable: [{
                id: 1,
                // 所属院系
                faculty: '医学院',
                // 学生姓名
                name: '王小虎',
                // 性别
                sex: '男',
                // 身份证号
                idNumber: '610581199911084952',
                // 学号
                studentId: '13878457845',
                // 专业
                specialty: '护理',
                // 年级
                grade: '18级',
                // 联系电话
                contactNumber: '15254125412',
                // 是否为预约人
                isReserve: true,
            }, {
                id: 2,
                faculty: '计算机学院',
                name: '王小虎',
                sex: '女',
                idNumber: '610581199911084952',
                studentId: '13878457845',
                specialty: '通信工程',
                grade: '17级',
                contactNumber: '15254125412',
                isReserve: false,
            },
            {
                id: 3,
                faculty: '计算机学院',
                name: '王小虎',
                sex: '女',
                idNumber: '610581199911084952',
                studentId: '13878457845',
                specialty: '通信工程',
                grade: '17级',
                contactNumber: '15254125412',
                isReserve: false,
            },

            ]
        };
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        // 打开弹窗
        openDialog() {
            this.addDialogVisible = true
        },
        // 弹窗关闭执行的函数
        handleClose() {

        },
        // 点击图片
        selectSpacePictures(e) {
            // 给传值
        },
        // 选择时间
        selectTime() {
            console.log('1');
            this.selectIs = 'selectIs'
        },
        // 触发预约人数的函数
        NumberAppointment() {
            // 执行过程
        }
    },
};
</script>
<style lang="less" scoped>
/deep/.el-dialog__body {
    padding: 0 30px;
}

.chooseSpace {
    >h4 {
        margin-left: 10px;
        position: relative;
        display: inline-block;

        &::before {
            position: absolute;
            left: -10px;
            bottom: -3px;
            content: '';
            width: 5px;
            height: 20px;
            background-color: #cfcfcf;
        }
    }

    .timeDate {}
}

/deep/.el-tabs__nav-wrap::after {
    background-color: #fff;
}

.chooseSpaceImg {
    display: flex;
    width: 80px;
    height: 80px;
    margin-right: 10px;
}

.el-badge {
    margin-right: 20px;
}

/deep/.el-badge__content.is-fixed {
    top: 0;
    right: 35px;
}

.selectIs {
    color: #409eff;
    border-color: #409eff;
}
</style>